import { UploadOutlined } from '@ant-design/icons';
import style from './index.less';
import {
  Button,
  Upload,
  Space,
  Input,
  Select,
  DatePicker,
  Radio,
  Form,
  message,
} from 'antd';
import { Descriptions } from 'antd';
import { Tabs } from 'antd';
import request from '@/http';
import React, { useState, useEffect } from 'react';
import Submit from '../TaskManagement/Submit';
const { Option } = Select;
const { TabPane } = Tabs;
const { TextArea } = Input;
import { history } from '@/.umi/core/history';
import moment from 'moment';
// const data = await formObject.validateFields();
import All_style from '../../index.less';

const layout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 16 },
};

const props = {
  action: 'https://www.mocky.io/v2/5cc8019d300000980a055e76',
  onChange({ file, fileList }) {
    if (file.status !== 'uploading') {
      console.log(file, fileList);
    }
  },
  defaultFileList: [
    {
      uid: '1',
      name: 'xxx.png',
      status: 'done',
      response: 'Server Error 500',
      url: 'http://www.baidu.com/xxx.png',
    },
    {
      uid: '2',
      name: 'yyy.png',
      status: 'done',
      url: 'http://www.baidu.com/yyy.png',
    },
  ],
};

const columns = [
  {
    title: '姓名',
    dataIndex: 'studentName',
    key: 'studentName',
  },
  {
    title: '学号',
    dataIndex: 'studentNo',
    key: 'studentNo',
  },
  {
    title: '专业',
    dataIndex: 'majorName',
    key: 'majorName',
  },
  {
    title: '学院',
    dataIndex: 'collegeName',
    key: 'collegeName',
  },
  {
    title: '年级',
    dataIndex: 'gradeName',
    key: 'gradeName',
  },
  {
    title: '班级',
    dataIndex: 'className',
    key: 'className',
  },
  {
    title: '班主任',
    dataIndex: 'teacherName',
    key: 'teacherName',
  },
];
const addLeave = () => {
  /*提交请假申请的修改*/
  const [formObject] = Form.useForm();

  const [captchaUrl, setCaptchaUrl] = React.useState('');
  const addSubmit = async () => {
    const datas = await formObject.validateFields();
    console.log(datas);
    const addResult: any = await request.post(
      '/ask_for_leave/student/ask/commit',
      {
        ...datas,
        vacationBeginDate: datas.vacationBeginDate.format(
          'YYYY-MM-DD HH:mm:ss',
        ),
        vacationEndDate: datas.vacationEndDate.format('YYYY-MM-DD HH:mm:ss'),
      },
    );
    console.log(addResult);
    if (addResult.success) {
      message.success('申请提交成功');
      window.history.back();
    }
  };
  const [user, setUser] = useState<any>({
    key: '1',
    studentName: '裴章燕',
    studentNo: '189000531',
    majorName: '软件工程',
    collegeName: '软件学院',
    gradeName: '18级',
    className: '1890005',
    teacherName: '李竹君',
  });
  /**
   * 获取用户基本信息
   */
  const loadData = async () => {
    const result: any = await request.post(
      '/information/student/selectPersonalInfo',
    );
    if (result.success) {
      setUser(result.data);
    }
    console.log(result.data);
  };

  useEffect(() => {
    loadData();
  }, []);
  const token: any = window.localStorage.getItem('token');
  return (
    <div>
      <Descriptions title="个人信息">
        <Descriptions.Item label="姓名">{user.studentName}</Descriptions.Item>
        <Descriptions.Item label="学号">{user.studentNo}</Descriptions.Item>
        <Descriptions.Item label="专业">{user.majorName}</Descriptions.Item>
        <Descriptions.Item label="院系">{user.collegeName}</Descriptions.Item>
        <Descriptions.Item label="年级">{user.gradeName}</Descriptions.Item>
        <Descriptions.Item label="班级">{user.className}</Descriptions.Item>
        <Descriptions.Item label="班主任">{user.teacherName}</Descriptions.Item>
      </Descriptions>
      <div>
        <Form {...layout} name="LeaveForm" form={formObject} preserve={false}>
          <Form.Item
            name="vacationTheme"
            rules={[
              { required: true, whitespace: true, message: '主题不能为空' },
            ]}
            label="主题"
            style={{ marginLeft: '-3rem' }}
          >
            <Input placeholder="请输入请假具体原因" required></Input>
          </Form.Item>

          <Form.Item
            name="vacationBeginDate"
            label="请假开始日期"
            // rules={[
            //   { required: true, whitespace: true, message: '请假开始日期不能为空' },

            // ]}
          >
            <DatePicker
              showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
              format="YYYY-MM-DD HH:mm:ss"
            />
          </Form.Item>

          <Form.Item
            name="vacationEndDate"
            required
            label="请假结束日期"
            // rules={[
            //   { required: true, whitespace: true, message: '请假结束日期不能为空' },
            // ]}
          >
            <DatePicker
              showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
              format="YYYY-MM-DD HH:mm:ss"
            />
          </Form.Item>
          <Form.Item
            name="vacationReason"
            required
            label="请假原因"
            rules={[
              { required: true, whitespace: true, message: '请选择请假原因' },
            ]}
          >
            <Radio.Group>
              <Radio value="病假">病假（需附校医院证明）</Radio>
              <Radio value="事假">事假</Radio>
              <Radio value="其他">其他</Radio>
            </Radio.Group>
          </Form.Item>

          <Form.Item
            name="vacationExplain"
            rules={[
              {
                required: true,
                whitespace: true,
                message: '请输入请假具体原因',
              },
            ]}
          >
            <TextArea
              rows={3}
              placeholder="请输入请假具体原因"
              required
            ></TextArea>
          </Form.Item>

          <Form.Item name="vacationAttachment" label="相关附件：">
            <Upload
              action="http://10.8.21.181:8081/common/a_t_s/uploads"
              listType="picture"
              name={'file'}
              headers={{ Authorization: token }}
            >
              <Button className={style.Button}>上传附件</Button>
            </Upload>
          </Form.Item>
          <Button
            className={All_style.button}
            type="primary"
            onClick={addSubmit}
          >
            确认提交
          </Button>

          <Button
            type="link"
            onClick={() => {
              history.push(`/student/LeaveManagement/index`);
            }}
            className={All_style.button2}
          >
            取消
          </Button>
        </Form>
      </div>
    </div>
  );
};
export default addLeave;
